<template>
  <div class="upload-container">
    <el-upload
      class="upload-demo"
      drag
      :action="uploadAction"
      :auto-upload="false"
      :on-change="handleChange"
      :show-file-list="false"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        拖拽文件到此处或 <em>点击选择</em>
      </div>
    </el-upload>

    <div v-if="file" class="file-info">
      <i class="el-icon-document"></i>
      <span>{{ file.name }} ({{ formatFileSize(file.size) }})</span>
    </div>

    <el-button
      type="primary"
      :disabled="!file"
      @click="submitUpload"
      class="upload-btn"
    >
      上传文件
    </el-button>

    <div v-if="message" :class="['message', messageType]">
      {{ message }}
    </div>

    <!-- 分析结果展示 -->
    <div v-if="analysisResult" class="result-container">
      <h3>分析结果</h3>

      <div v-if="analysisResult.rows !== undefined" class="result-item">
        <span class="result-label">总行数:</span>
        <span class="result-value">{{ analysisResult.rows }}</span>
      </div>

      <div v-if="analysisResult.columns !== undefined" class="result-item">
        <span class="result-label">列数:</span>
        <span class="result-value">{{ analysisResult.columns }}</span>
      </div>

      <div v-if="analysisResult.columnNames && analysisResult.columnNames.length > 0" class="result-item">
        <span class="result-label">列名:</span>
        <span class="result-value">{{ analysisResult.columnNames.join(', ') }}</span>
      </div>

      <div v-if="analysisResult.previewData && analysisResult.previewData.length > 0" class="preview-container">
        <h4>数据预览</h4>
        <el-table
          :data="analysisResult.previewData"
          stripe
          style="width: 100%"
          v-loading="tableLoading"
        >
          <el-table-column
            v-for="column in analysisResult.columnNames"
            :key="column"
            :prop="column"
            :label="column"
            :min-width="120"
          >
          </el-table-column>
        </el-table>
      </div>

      <div v-if="analysisResult.statistics && Object.keys(analysisResult.statistics).length > 0" class="stats-container">
        <h4>数据统计</h4>
        <el-tabs v-model="activeTab" type="card">
          <el-tab-pane v-for="(stats, column) in analysisResult.statistics" :key="column" :label="column">
            <el-table :data="formatStats(stats)" stripe style="width: 100%">
              <el-table-column prop="name" label="统计项" width="120"></el-table-column>
              <el-table-column prop="value" label="值"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
      message: '',
      messageType: '',
      uploadAction: 'http://localhost:8090/analyze',
      analysisResult: null,
      activeTab: '',
      tableLoading: false
    }
  },
  methods: {
    handleChange(file) {
      this.file = file.raw;
      this.message = '';
    },
    formatFileSize(bytes) {
      if (bytes === 0) return '0 Bytes';
      const k = 1024;
      const sizes = ['Bytes', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    },

    formatStats(stats) {
      return [
        { name: '数量', value: stats.count || '-' },
        { name: '总和', value: stats.sum || '-' },
        { name: '最小值', value: stats.min || '-' },
        { name: '最大值', value: stats.max || '-' },
        { name: '平均值', value: stats.average || '-' },
        { name: '标准差', value: stats.stdDev || '-' }
      ];
    },
    async submitUpload() {
      if (!this.file) {
        this.message = '请先选择文件';
        this.messageType = 'error';
        return;
      }

      this.tableLoading = true;
      const formData = new FormData();
      formData.append('file', this.file);

      try {
        const response = await axios.post(this.uploadAction, formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });

        // 处理后端返回数据
        this.analysisResult = response.data;
        this.message = '分析成功';
        this.messageType = 'success';

        // 设置第一个统计标签为激活状态
        if (this.analysisResult.statistics && Object.keys(this.analysisResult.statistics).length > 0) {
          this.activeTab = Object.keys(this.analysisResult.statistics)[0];
        }
      } catch (error) {
        console.error('分析失败:', error);
        this.message = '分析失败: ' + (error.response?.data?.message || error.message);
        this.messageType = 'error';
      } finally {
        this.tableLoading = false;
      }
    }
  }
}
</script>

<style scoped>
/* 样式保持不变 */
.upload-container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}

.upload-demo {
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s;
}

.upload-demo:hover {
  border-color: #409eff;
}

.el-upload__text {
  color: #606266;
  margin-top: 10px;
}

.el-upload__text em {
  color: #409eff;
  font-style: normal;
}

.file-info {
  margin: 1rem 0;
  padding: 12px 16px;
  background-color: #f5f7fa;
  border-radius: 4px;
  display: flex;
  align-items: center;
  color: #606266;
}

.file-info i {
  margin-right: 8px;
  color: #909399;
}

.upload-btn {
  width: 100%;
  margin-top: 1rem;
}

.message {
  margin-top: 1rem;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14px;
}

.success {
  background-color: #f0f9eb;
  color: #67c23a;
  border: 1px solid #e1f3d8;
}

.error {
  background-color: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fde2e2;
}
/* 新增结果展示样式 */
.result-container {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: #f5f7fa;
  border-radius: 6px;
}

.result-item {
  display: flex;
  margin-bottom: 1rem;
  font-size: 14px;
}

.result-label {
  width: 80px;
  color: #909399;
  font-weight: normal;
}

.result-value {
  font-weight: 500;
  color: #303133;
}

.preview-container, .stats-container {
  margin-top: 1.5rem;
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

h3, h4 {
  color: #303133;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ebeef5;
}
</style>
